<template>
  <div>
    <div v-if="tableVisible">
      <a-table
        :pagination="false"
        :columns="columns"
        :data-source="tableData"
        :scroll="{ x: 1500 }"
        bordered
        size="small"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import { baseDataTableList } from '@/api/modular/main/tsdatarecord/baseDataTable'
import { metadataPage } from '@/api/modular/main/tsdatarecord/timeSpaceDataRecordManage'
export default {
  name: 'uploadDataTable',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      columns: [],
      tableData: [],
      tableVisible: false
    }
  },
  watch: {
    visible(v) {
      this.tableVisible = v
    }
  },
  methods: {
    init(recordId) {
      baseDataTableList({ recordId: recordId }).then(res => {
        if (res.success) {
          this.columns = []
          this.columns.push({
            title: '序号',
            width: 50,
            fixed: 'left',
            dataIndex: 'key'
          })
          res.data.forEach(col => {
            col.ellipsis = true
            this.columns.push(col)
          })
          this.tableVisible = true
          metadataPage({ recordId: recordId, pageNo: 1, pageSize: 5 }).then(res => {
            if (res.success) {
              this.tableData = []
              for (let i = 0; i < res.data.rows.length; i++) {
                res.data.rows[i] = JSON.parse(res.data.rows[i].content)
                res.data.rows[i].key = i + 1
                this.tableData.push(res.data.rows[i])
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
